<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>SODN vegetation map viewer</title>

<script src="http://www.openlayers.org/api/OpenLayers.js"></script>
<script src="{{MEDIA_URL}}js/jquery.js"></script>

<!-- Make the document body take up the full screen -->
<style type="text/css">
v\: {
	behavior:url(#default#VML);
}
html, body {
	width: 100%;
	height: 100%;
	overflow: auto;
}
body {
	margin-top: 0px;
	margin-right: 0px;
	margin-left: 0px;
	margin-bottom: 0px
}
.logo {
	position: absolute;
	top: 1%;
	right: 1%;
	height: 85px;
	z-index: 3;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: none;
	filter:	alpha(opacity=100);
	-moz-opacity: 1;
	opacity: 1;	
}
hr {
	position: relative;
	top: 0px;
	margin: 0;
	padding: 0;
	height: 2px;
}
h1 {
	vertical-align: top;
	margin: 0;
	padding: 0;
	border-bottom-style: dotted;
	color: #000;
	opacity: 60%;
}
h2 {
	margin: 0;
	padding: 1px;
	top: 0px;
	display: inline;
}
.notes_label{
	font-variant: small-caps;
	text-decoration: underline;
}

#parkChooser {
	position: relative;
	left: 5%;
	border-top-style: none;
	border-right-style: none;
	border-bottom-style: none;
	border-left-style: dotted;
	border-top-width: 2px;
	border-right-width: 2px;
	border-bottom-width: 2px;
	border-left-width: 2px;
	background-color: Transparent;
	display: inline;
	width: 100%;
}
#loadingIndicator {
	display: inline;
	position: absolute;
	z-index:99999999999;
	top: 50%;
	left: 50%;
	font-size: xx-large;
	color: #F00;
}
#header {
	width: 100%;
	z-index: 2;
	position: absolute;
	background: #AAAAAA;
	filter:	alpha(opacity=60);
	-moz-opacity: .60;
	opacity: .60;	
}

</style>
        <script type="text/javascript">

 

	


function selected (evt) {
/*	var request = OpenLayers.Request.POST({
    url: "/post_test/",
    data: OpenLayers.Util.getParameterString({'poly_id': evt.feature.attributes.name,'park':document.getElementById('parkName').value}),
    headers: {
        "Content-Type": "application/x-www-form-urlencoded"
    },
    callback: handler
	})*/		
		$('#clear').show();		
$.post('/post_test/',
	   { 'poly_id': evt.feature.attributes.name,'park':document.getElementById('parkName').value },
		function(data){
			document.getElementById("veg_notes").innerHTML = data.polygon.veg_notes;
			document.getElementById("soil_notes").innerHTML = data.polygon.soil_notes;
			for (var direction in data.photos) {
				imageHTML=direction+' photo <br/><a target=_blank href='+data.photos[direction].full+'><img src='+data.photos[direction].thumbnail+'></img></a>'
				$("#photo_container_"+direction).html(imageHTML)
				$('#photo_container_'+direction).show("slow");
			}
			
				$('.notes_label_polygon').html(' for '+data.polygon.new_id);

				
				$('#veg_notes_container').show();
				$('#soil_notes_container').show();
			
			responsevariable=data
		},
  		"json");

	
	/*document.getElementById("polyName").innerHTML = evt.feature.attributes.name*/

}

function changePark(parkCode) {
/*	alert(form.parkName.value)
alert(eval(form.parkName.value).getExtent())*/
	$('#loading').show();
	$('#park_link').html('<a href=http://www.nps.gov/'+parkCode+'>go to park website</a>');
	if(typeof(parkLayer) != 'undefined'){
		parkLayer.destroy();
	};
	parkLayer=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}"+parkCode+"Polys.kml", 
	{
	format: OpenLayers.Format.KML, 
	formatOptions: {
	  extractStyles: true, 
	  extractAttributes: true,
	  }
   });
	map.addLayer(parkLayer);	

    parkLayer.events.register("loadend", parkLayer, function() {
		map.zoomToExtent(parkLayer.getDataExtent());
		$('#loading').hide();
		
		
    });

	selectFeature=new OpenLayers.Control.SelectFeature(
		parkLayer,
		{
				multiple: false, hover: false,
		});

	map.addControl(selectFeature);

	selectFeature.activate();
	parkLayer.events.register("featureselected", parkLayer, selected);
		
}

function init(){
	map = new OpenLayers.Map( 'map' );

	var wms = new OpenLayers.Layer.WMS( "OpenLayers WMS",
			  "http://labs.metacarta.com/wms/vmap0",
			  {layers: 'basic'} );
/*                var google = new OpenLayers.Layer.Google( "Google Hybrid" , {type: G_HYBRID_MAP });*/


	map.addLayers([wms]);

/*                map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);*/
	map.addControl( new OpenLayers.Control.LayerSwitcher() );
    map.addControl( new OpenLayers.Control.MousePosition() );
				
				//KML loading
/*
			parkLayer=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}tontPolys.kml", 
               	{
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                }
               }); /*

			fobo=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}foboPolys.kml", 
               	{
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  extractStyles: true, 
                  extractAttributes: true,
                  
                }
				
               });

			chir=new OpenLayers.Layer.GML("KML", "{{MEDIA_URL}}chirPolys.kml", 
               	{
                format: OpenLayers.Format.KML, 
                formatOptions: {
                  strategies: [
                  new OpenLayers.Strategy.Cluster()
                  ]
                  
                }
               });

			map.addLayer(chir);
	        map.addLayer(parkLayer);*/
	
		
			

			extent = new OpenLayers.Bounds( -111.127592, 33.636746, -111.099538, 33.660434)
			map.zoomToExtent(extent);

			
                    var panZoomLeftBottom = {
				'right' : '100px',
				'left' : '',				
				'top' : '150px',
				'bottom' : ''
		      }

			$('.olControlPanZoom').css(panZoomLeftBottom);
			$('.olControlLayerSwitcher').css('top','100px');

			changePark('tont');			

			};

	function clearDivs(){
		$('.photo_container').hide();
		$('#veg_notes_container').hide();
		$('#soil_notes_container').hide();
		$('#clear').hide();		
	};
        </script>

</head>
<body onload="init()">
<!-- Declare the div, make it take up the full document body -->
<div id="map" style="position: absolute;width: 100%; height:100%"></div>
<div id="header" style="">
<h1>Sonoran Desert Network</h1>
<a href="http://science.nature.nps.gov/im/units/sodn/"><img src="{{MEDIA_URL}}NPSArrowhead.png" alt="NPS logo" class="logo" /></a>
<div id="parkChooserDiv">
<form id="parkChooser" action="">
  <h2> Map viewer for </h2>
  &nbsp;&nbsp;

      <select id="parkName" onchange="changePark(this.form.parkName.value);">
      {% for park in parks %}
        <option value="{{park.code}}">{{ park }}</option>
	  {% endfor %}
      </select>

        
        

      <a id="clear" style="display:hidden;" href="javascript:clearDivs()">hide details</a>
      &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
      <a id="park_link" href="javascript:void(0)"></a>

</form>
</div>
</div>

<div id="photo_container_N" class="photo_container" style="position:absolute; border:thick solid #BBBBBB; background:#BBBBBB; top:75px ; width:200px; margin-top:0px; margin-bottom:0px; left:50%; margin-left:-100px; display:none;">
North photo
</div>

<div id="photo_container_E" class="photo_container" style="position:absolute; border:thick solid #BBBBBB; background:#BBBBBB; top:75px ; width:200px; margin-top:0px; margin-bottom:0px; right:5px; display:none;">
East photo
</div>

<div id="photo_container_S" class="photo_container" style="position:absolute; border:thick solid #BBBBBB; background:#BBBBBB; bottom:5px ; width:200px; left:50%; margin-left:-100px; display:none;">
South photo
</div>

<div id="photo_container_W" class="photo_container" style="position:absolute; border:thick solid #BBBBBB; background:#BBBBBB; top:75px ; width:200px; margin-top:0px; margin-bottom:0px; left:5px; display:none;">
West photo
</div>

<div id="veg_notes_container" style="position:absolute; bottom:0px; left:0px; width:25%; overflow:auto; border:thick solid #BBBBBB; margin-top:150px; max-height:50%">
<div class="notes_label">
Vegetation Description <class="notes_label_polygon"></>
</div>
<div id="veg_notes">
[Select a polygon to view its vegetation description]
</div>
</div>

<div id="soil_notes_container" style="position:absolute; bottom:0px; right:0px; width:25%; overflow:auto; border:thick solid #BBBBBB; margin-top:150px; max-height:50%">
<div class="notes_label" id="soil_notes_label">
Landscape Description <class="notes_label_polygon"></>
</div>
<div id="soil_notes" >
[Select a polygon to view its landscape description]
</div>
</div>

<div id="loading" style="position:relative; color:red; margin:auto; top:40%">
<h2 style="color:red; margin-right:auto; margin-left:auto;"><center>Loading</center></h2>
</div>

</body>
</html>
